// Zurmo is a customer relationship management program developed by
// Zurmo, Inc. Copyright (C) 2014 Zurmo Inc.
//
// Zurmo is free software; you can redistribute it and/or modify it under
// the terms of the GNU Affero General Public License version 3 as published by the
// Free Software Foundation with the addition of the following permission added
// to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
// IN WHICH THE COPYRIGHT IS OWNED BY ZURMO, ZURMO DISCLAIMS THE WARRANTY
// OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
//
// Zurmo is distributed in the hope that it will be useful, but WITHOUT
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
// FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
// details.
//
// You should have received a copy of the GNU Affero General Public License along with
// this program; if not, see http://www.gnu.org/licenses or write to the Free
// Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
// 02110-1301 USA.
//
// You can contact Zurmo, Inc. with a mailing address at 27 North Wacker Drive
// Suite 370 Chicago, IL 60606. or at email address contact@zurmo.com.
//
// The interactive user interfaces in original and modified versions
// of this program must display Appropriate Legal Notices, as required under
// Section 5 of the GNU Affero General Public License version 3.
//
// In accordance with Section 7(b) of the GNU Affero General Public License version 3,
// these Appropriate Legal Notices must retain the display of the Zurmo
// logo and Zurmo copyright notice. If the display of the logo is not reasonably
// feasible for technical reasons, the Appropriate Legal Notices must display the words
// "Copyright Zurmo Inc. 2014. All rights reserved".

.sliding-panels-container{}

.sliding-panel{
	display: none;
	width: 100%;
	
	position: relative;
}

div.showing-panel{
	display: block;
}

.business-card{
	.gravatar{
		margin-right: 12px;
		margin-bottom:6px;
	}
	h2{
		line-height: 100%;
		margin-right: 10px;
		display: inline-block;
		.salutation{
			font-weight: normal;
			font-size: 80%;
			margin-right: 5px;
		}
		.user-name{
			font-weight: normal;
			font-size: 80%;
			margin-left: 5px;
		}
	}
	.icon-star{
		margin-left: 5px;
	}
	h3.position{
		margin-top: 10px;
		line-height: 140%;
		font-weight: normal;
		color: @textColor !important;
	}
	h4{
		color: @textColor !important;
		line-height: 150%;
		margin-bottom: 15px;
		font-size: 14px;
	}
	.contact-details{
		clear: left;
		color: #111;
		font-size: 14px;
		color: #666;
		margin-bottom: 7px;
		margin-top: 10px;
		> span{
			margin: 5px 20px 5px 0;
			color: #333;
			white-space:nowrap;
			float:left;
		}
	}
	.address{
		clear:left;
		margin-bottom: 15px;
	}
	.icon-office-phone{
		&:before{
			content:"W";
			.symbly(20px);
			padding-right: 3px;
			color: #111;
			line-height: 1;
		}
	}
	.icon-mobile-phone{
		&:before{
			content:'\2018';
			.symbly(21px);
			padding-right: 3px;
			color: #111;
			line-height: 1;
		}
	}
	.icon-email{
		&:before{
			content:"g";
			.symbly(18px);
			padding-right: 5px;
			color: #111;
			line-height: 1;
		}
	}
	.icon-map{
		&:before{
			content:"L";
			.symbly(20px);
			padding-right: 3px;
			color: #111;
			line-height: 1;
		}
	}
	.demographic-details{
		position: absolute;
		top: 0;
		right: 0;
		text-align: right;
		.sex{
			width: 35px;
			height: 62px;
			display: block;
			text-indent: -9999px;
			text-align: left;
			margin-top: 0;
			line-height: 1;
		}
		.male{
			background: url("@{path}people.png") right top no-repeat;
		}
		.female{
			background: url("@{path}people.png") right bottom no-repeat;
		}
		span{
			margin-top: 8px;
			font-weight: bold;
			display: block;
			float: right;
			line-height: 150%;
		}
	}
}

/*
.icon-demographic{

}

.icon-household{

}

.icon-interest{

}

.icon-purchase{

}
*/

#business-card-buttons{
	display: none !important;
	display: inline-block;
	.smaller();
	> div{
		display: inline-block;
		border:1px solid #b7b7b7;
		border-top-color: #e7e7e7;
		border-left-color:#d7d7d7;
		border-right-color:#d7d7d7;
		border-radius:4px;
		background:url("@{path}view-toolbar-gradient-darker.png") left bottom repeat-x;
		
		.b-shadow(~"inset 0 0 1px 1px #efefef, 0 0 9px 5px rgba(153, 153, 153, 0.12)");
	}
	a{
		text-align: center;
		width: auto;
		
		position:relative;
		border-left: 1px solid #bababa;
		text-shadow:#fff 0 1px 0;
		margin: 0;
		padding:0 6px;
		display:inline-block;
		border-left:1px solid #bababa;
		&:first-child{
			border-left: none;
		}
		span{
			font-size: 10px;
			font-weight: bold;
			display: none;
		}
		i{
			font-style: normal;
			.symbly(22px);
			line-height: 1;
			color: #656565;
		}
	}
	&.center-top{
		position: absolute;
		top: -1px;
		left: 50%;
		margin-left: -72px;
		strong{
			margin-right: 4px;
		}
		> div{
			.radius(0 0 4px 4px);
		}
	}
	&.top-right{
		position: absolute;
		right: 12px;
		top: 16px;

		a, strong{
			display: block;
		}
		strong{
			margin-bottom: 3px;
			font-size: 10px;
			text-align: right;
		}
		a{
			border-left: none;
			border-top: 1px solid #bababa;
			&:first-child{
				border-top: none;
			}
			&:hover span{
				float: left;
				position: absolute;
				right: 32px;
				top: 5px;
				display: block;
			}
		}
	}
	.active{
		color: #97c43d;
		.t-shadow(0 0 1px lighten(#97c43d, 25%));
		i{
			color: #97c43d;
		}
	}
}

.social-icon{
	width: 22px;
	height: 22px;
	display: inline-block;
	text-indent: -9999px;
	margin-right: 4px;
	&:hover{
		.radius(3px);
		.b-shadow(0 0 7px 0 #999);
	}
}

.icon-bebo{ background: url("@{path}social-icons/bebo.png") center center no-repeat }
//.icon-email{ background: url("@{path}social-icons/email.png") center center no-repeat }
.icon-instagram{ background: url("@{path}social-icons/instagram.png") center center no-repeat }
.icon-picasa{ background: url("@{path}social-icons/picasa.png") center center no-repeat }
.icon-stumbleupon{ background: url("@{path}social-icons/stumbleupon.png") center center no-repeat }
.icon-behance{ background: url("@{path}social-icons/behance.png") center center no-repeat }
.icon-evernote{ background: url("@{path}social-icons/evernote.png") center center no-repeat }
.icon-lastfm{ background: url("@{path}social-icons/lastfm.png") center center no-repeat }
.icon-pinterest{ background: url("@{path}social-icons/pinterest.png") center center no-repeat }
.icon-tumblr{ background: url("@{path}social-icons/tumblr.png") center center no-repeat }
.icon-blogger{ background: url("@{path}social-icons/blogger.png") center center no-repeat }
.icon-facebook{ background: url("@{path}social-icons/facebook.png") center center no-repeat }
.icon-posterous{ background: url("@{path}social-icons/posterous.png") center center no-repeat }
.icon-twitter{ background: url("@{path}social-icons/twitter.png") center center no-repeat }
.icon-delicious{ background: url("@{path}social-icons/delicious.png") center center no-repeat }
.icon-flickr{ background: url("@{path}social-icons/flickr.png") center center no-repeat }
.icon-linkedin{ background: url("@{path}social-icons/linkedin.png") center center no-repeat }
.icon-reddit{ background: url("@{path}social-icons/reddit.png") center center no-repeat }
.icon-typepad{ background: url("@{path}social-icons/typepad.png") center center no-repeat }
.icon-designfloat{ background: url("@{path}social-icons/designfloat.png") center center no-repeat }
.icon-forrst{ background: url("@{path}social-icons/forrst.png") center center no-repeat }
.icon-myspace{ background: url("@{path}social-icons/myspace.png") center center no-repeat }
.icon-rss{ background: url("@{path}social-icons/rss.png") center center no-repeat }
.icon-vimeo{ background: url("@{path}social-icons/vimeo.png") center center no-repeat }
.icon-deviantart{ background: url("@{path}social-icons/deviantart.png") center center no-repeat }
.icon-friendfeed{ background: url("@{path}social-icons/friendfeed.png") center center no-repeat }
.icon-netvibes{ background: url("@{path}social-icons/netvibes.png") center center no-repeat }
.icon-skype{ background: url("@{path}social-icons/skype.png") center center no-repeat }
.icon-wordpress{ background: url("@{path}social-icons/wordpress.png") center center no-repeat }
.icon-digg{ background: url("@{path}social-icons/digg.png") center center no-repeat }
.icon-googleplus{ background: url("@{path}social-icons/googleplus.png") center center no-repeat }
.icon-orkut{ background: url("@{path}social-icons/orkut.png") center center no-repeat }
.icon-soundcloud{ background: url("@{path}social-icons/soundcloud.png") center center no-repeat }
.icon-yahoo{ background: url("@{path}social-icons/yahoo.png") center center no-repeat }
.icon-dribbble{ background: url("@{path}social-icons/dribbble.png") center center no-repeat }
.icon-grooveshark{ background: url("@{path}social-icons/grooveshark.png") center center no-repeat }
.icon-path{ background: url("@{path}social-icons/path.png") center center no-repeat }
.icon-spotify{ background: url("@{path}social-icons/spotify.png") center center no-repeat }
.icon-youtube{ background: url("@{path}social-icons/youtube.png") center center no-repeat }
.icon-klout{ background: url("@{path}social-icons/klout.png") center center no-repeat }
.icon-gravatar{ background: url("@{path}social-icons/gravatar.png") center center no-repeat }
.icon-plancast{ background: url("@{path}social-icons/plancast.png") center center no-repeat }
.icon-quora{ background: url("@{path}social-icons/quora.png") center center no-repeat }
.icon-foursquare{ background: url("@{path}social-icons/foursquare.png") center center no-repeat }
.icon-lanyrd{ background: url("@{path}social-icons/lanyrd.png") center center no-repeat }
.icon-aboutme{ background: url("@{path}social-icons/aboutme.png") center center no-repeat }

.back-of-card{
	display: none;
	h3{
		margin-bottom: 10px;
		margin-top: 30px;
	}
	ul{
		list-style: none;
	}
	li{
		font-weight: bold;
		margin-bottom: 3px;
		color: #666;
	}
	li span{
		font-weight: normal;
		margin-left: 5px;
		border: 1px solid #ccc;
		background: #eaeaea;
		.radius(3px);
		padding:2px 4px;
		.smaller();
		color: #323232;
	}
	.complex-data{
		li{
			line-height: 200%;
			width: 33.3%;
			float: left;
		}
	}
	.simple-data{
		li{
			float: left;
			width: auto;
			margin-bottom: 7px;
		}
		span{
			margin: 0 5px 0 0;
		}
	}
	.half{
		float: left;
		width: 49%;
		+ .half{
			margin-left: 2%;
		}
	}
}

div.special-pager{
	margin-bottom: 0 !important;
	border-left:none !important;
	border-right:none !important;
	border-bottom:none !important;
	.next span{
		text-indent: 0 !important;
		.smaller();
		padding: 5px 0 5px 0 !important;
	}
	.next a:after,
	.hidden.next:after{
		display: none !important;
	}
}

#sliding-panel-toggle{
	
	width:100%;
	background: #fff url("@{path}view-toolbar-gradient.png") left bottom repeat-x;
	.b-shadow(inset 0 1px 0 #DFDFDF );
	overflow: hidden;
	display:block;
	text-align:center;
	font-weight:bold;
	padding:5px 0;
	.smaller();
}

.mini-button{
	cursor: pointer;
	display: inline-block;
	border:1px solid #b7b7b7;
	border-top-color: #e7e7e7;
	border-left-color:#d7d7d7;
	border-right-color:#d7d7d7;
	border-radius:4px;
	background:url("@{path}view-toolbar-gradient-darker.png") left bottom repeat-x;
	
	.b-shadow(inset 0 0 1px 1px #efefef);
	color:@textColor;
	.t-shadow(#fff 0 1px 0);
	line-height:22px;
	height: 22px;
	padding: 0 6px;
	span{
		.smaller();
		font-weight:bold;
		.t-shadow(0 1px 0 #fff);
		color:@textColor;
		line-height:22px;
	}
	&:hover{
		color: @themeColor2 !important;
		span{
			color: @themeColor2;
		}
	}
}

.toggle-back-of-card-link{
	margin-top: 5px;
	span{
		display: none;
		padding: 0 6px 0 28px;
		background: url("@{path}rapleaf.png") 4px center no-repeat;
	}
	span + span{
		line-height:22px;
	}
	.show{
		display:block;
	}
}

.callable-item{
	position: relative;
	z-index: 100;
	em{
		margin-right: 4px;
		font-style:normal;
	}
	&:hover{
		.icon-onsip{
			display: block;
		}
	}
	.icon-onsip{
		animation-name: shake;
		animation-duration: 200ms;
		animation-iteration-count: 2;
		animation-timing-function: linear;

		-moz-animation-name: shake;
		-moz-animation-duration: 200ms;
		-moz-animation-iteration-count: 2;
		-moz-animation-timing-function: linear;

		-webkit-animation-name: shake;
		-webkit-animation-duration: 200ms;
		-webkit-animation-iteration-count: 2;
		-webkit-animation-timing-function: linear;

		font-size: 28px;
		font-weight: normal !important;
		.t-shadow(none) !important;
		display: none;
		color: #fff;
		position: absolute;
		left:-32px;
		top: -2px;//-30px;
		background: @textColor;
		width: 24px;
		height: 24px;
		line-height: 21px;
		text-align: center;
		.radius(50%);
		&:before{
			position: absolute;
			right: -10px;
			top: 6px;
			content: '';
			display: block;
			border: 6px solid @textColor;
			border-top-color: transparent;
			border-bottom-color: transparent;
			border-right-color: transparent;

		}
	}
}

.hangup{
	position: relative;
	z-index: 0;
	padding-left: 12px;
	margin-left: -25px;
	.smaller();
	@topColor: #c43d53;
	@bottomColor: #a82d31;
	border: 1px solid @topColor;
	.b-shadow(inset 0 0 1px 1px @bottomColor);
	.t-shadow(@bottomColor 0 1px 0);
	line-height:20px;
	color: lighten(@topColor, 80%);
	#gradient > .vertical(@topColor, @bottomColor );
	&:hover{
		color: darken(@bottomColor, 75%) !important;
		.t-shadow(0px 1px 0 lighten(@topColor, 5%));
		#gradient > .vertical(@topColor, darken(@bottomColor, 10%));
	}
}